<template>
  <div class="video-container clearfix" >
    
    <!-- <div class="" style="width:300px;height:500px;background:yellow;">
      <video-player :playsinline="true" style="width:100%;object-fit:fill;height:400px;border:1px solid red"  class="video-player vjs-custom-skin" :options="playerOptions" ></video-player>
      <video width="100%" height="250" hspace="0px" vspace="0px" style="object-fit:fill;border:1px solid red" object-fit="fill" data="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" ></object>
      <video width="100%" style="height:280px;border:1px solid red;" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  autoplay ></video>
    </div> -->
    
    <div class="company-wrap" >
        <Tree :tree="rmdTreeData" :playid="playIds" v-if="isMonitor" /></Tree>
        <Tree :tree="treeData" :playid="playIds" /></Tree>
        
    </div>
    <!-- <video-player style="width:500px;" :playsinline="true" class="vjs-custom-skin" :options="playerOptions" ></video-player> -->
    <!-- 359 295 -->
    <div class="video-wrap" id="videoWrap">
      <ul  class="video-content clearfix screen4"  :class="{'screen4':screenNum==4,'screen9':screenNum==9,'f-screen':fullScreen}" style="height:100%;">
        <li class="video-item" v-for="(item,index) in videoData" :key="index"  :class="{'f-screen':fullScreen}" :ref="`videoData${index}`">
          <!-- <div style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:100" @dblclick="fullScreenHandle(index)"  @mouseenter="videoenter(item,index)" @mouseleave="activeVideo = -1" ></div> -->

          <!-- <div class="video" :class="{'video-no':!item.hasVideo,'drag-video':dragIndex == index}" @mouseenter="videoenter(item,index)"   @mouseleave="activeVideo = -1"  -->
          <div class="video" :class="{'video-no':!item.hasVideo,'drag-video':dragIndex == index}"  
            @drop="drop($event)" @dragover="allowDrop($event)" @dragleave="dargLeave($event,item)" 
            @dragenter="dargEnter($event,item)"
            @dragend="dragend($event)"
            :data-idx="index">
            <!-- <div v-if="item.hasVideo" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;" @dblclick="fullScreenHandle(index)"  ></div> -->
            <div class="wo" @dblclick="fullEvent(item,index)"></div>
            <div class="empty" v-show="!item.hasVideo" style="height:100%">
              <div class="content" style="height:100%">
                <div class="drag-before" v-show="dragIndex != index">从左侧拖动视频点到此处播放</div>
                <div v-show="dragIndex == index" class="drag-after">
                  <img src="./image/drag-video.png" alt="">
                  <div>释放鼠标开始播放</div>

                </div>
              </div>
            </div>
            <!-- <video-player :playsinline="true" style="width:100%;object-fit:fill" v-if="item.hasVideo"  class="video-player vjs-custom-skin" :options="item.playerOptions" :ref="'video'+index" ></video-player> -->
            <div :id="'playercontainer'+index" :ref="'video'+index"></div>
            <div v-show="item.hasVideo">
              <transition name="move">
                <!-- <div v-show="activeVideo == index" class="bottom" :key="index"> -->
                <div v-show="!item.hhh" class="bottom" :key="index">
                  <span class="type" v-show="item.rcmdCode">{{item.rcmdName}}</span>
                  <span class="title">{{item.cameraName}}</span>
                  <div class="handle-wrap">
                    <div class="recommend" @click="recommendEvent(item,index)" v-show="!item.isRecommend && isMonitor">推荐</div>
                    <div class="recommend recommend-no" style="padding:0 5px;" @click="showPoster(posterUrl,item.imageUrl,item)" v-show="item.isRecommend && isMonitor && item.imageUrl">封面图</div>
                    <div class="recommend recommend-no" @click="unRecommendEvent(item)" v-show="item.isRecommend && isMonitor">已荐</div>
                    <!-- <div class="collection">
                      <img src="./image/collection.png" alt="">
                    </div> -->
                    <img src="./image/full-screen-item.png" alt="" class="full-screen" @click="fullScreenHandle(item,index)">
                  </div>
                </div>
              </transition>
              <div v-show="activeVideo != index && item.hasVideo && item.rcmdCode" class="type type-no">{{item.rcmdName}}</div>
            </div>
          </div>
          
        </li>
      </ul>
      <div class="empty-content" style="display:none;" >
        <img src="./image/empty_search.png" alt="">
        <div class="tips">抱歉，暂未搜索到相关视频</div>
      </div>
    </div>
    <el-dialog title="推荐视频" :visible.sync="recommendDialog"  class="recommend-dialog dialog1" @close="close" >
      <div class="content">
        <div class="item">
          <div class="label require-label">视频类型</div>
          <!-- <div class="type-wrap clearfix">
            <div class="type-item fl"  v-for="(item,index) in typeData" :class="{'active':item.active}" @click="typeEvent(item)" :key="index">{{item.rcmdName}}</div>
            <div class="error-tips fl" v-show="typeError">请选择视频类型</div>
          </div> -->

          <div class="type-wrap clearfix" v-for="(item,index) in typeData" :key="index">
            <div class="t-title" :class="{'t-title1':item.rcmdCode == 'AB0100','t-title2':item.rcmdCode == 'AB0200','t-title3':item.rcmdCode == 'AB0300'}">{{item.rcmdName}}</div>
            <div class="type-list">
              <div class="type-item" v-for="(item1,index) in item.subRcmdCodes" :class="{'active':item1.active}" @click="typeEvent(item1)" :key="index">{{item1.rcmdName}}</div>
            </div>
          </div>
          <div class="error-tips" v-show="typeError">请选择视频类型</div>
          
        </div>
        <div class="item">
          <div class="label">路段</div>
          <!-- <input v-model="recommendForm.title" disabled class="title-input" type="text" placeholder="线路编号+路段+位置区间+摄像头名称"> -->
          <div class="dis-input">{{recommendForm.lineCode+' '+recommendForm.roadName}}</div>
        </div>
        <div class="item">
          <div class="label">推荐标题</div>
          <input v-model="recommendForm.rcmdTitle" class="title-input" type="text" placeholder="线路编号+路段+位置区间+摄像头名称">
        </div>
        <div class="item">
          <div class="label">封面图上传</div>
          <!-- <el-upload
            ref="upload"
            class="avatar-uploader"
            :action="baseUrl+'/admin/file/rmd/imgUpload'"
            accept=".jpg,.jpeg,.png,.gif"
            :data="uploadParams"
            :beforeUpload="beforeUpload"
            :onSuccess="uploadSuccess"
            :on-error="uploadError"
            :show-file-list="false">
            <input type="file">
            <img v-if="posterUrl" :src="posterUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
          <div
            ref="upload"
            class="avatar-uploader"
            :action="baseUrl+'/admin/file/rmd/imgUpload'"
            accept=".jpg,.jpeg,.png,.gif"
            :data="uploadParams"
            :beforeUpload="beforeUpload"
            :onSuccess="uploadSuccess"
            :on-error="uploadError"
            :show-file-list="false">
            <input type="file" @change="uploadEvent" accept="image/*">
            <img v-if="posterUrl" :src="posterUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
          <div class="tips">分辨率：280*156</div>
        </div>
      </div>
      <el-button class="confirm-btn" :loading="confirmLoading" @click="submit">确定</el-button>
    </el-dialog>
    <el-dialog title="取消推荐视频？" :show-close=false :visible.sync="cancelDialog"  class="cancel-dialog">
     <button class="btn cancel-btn" @click="confirmCancel" :loading="cancelLoading">取消推荐</button>
     <button class="btn no-btn" @click="cancelDialog = false">不取消</button>
    </el-dialog>



    <el-dialog title="封面图" :visible.sync="posterDialog"  class="recommend-dialog" @close="closePoster">
      <img :src="posterUrl" alt="" style="width:100%">
    </el-dialog>
  </div>
</template>

<script>
import Tree from '@/components/tree/tree.vue'
import {getVideoTree , getVideoInfo , getType , setRecommend , unRecommend , getVideoRcmdTree} from '@/api/live/video'
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
import { Loading } from 'element-ui';
import screenfull from 'screenfull'



export default {
  data() {
    return {
      baseUrl:process.env.VUE_APP_BASE_API,
      uploadParams: {
        fileName:''
      },
      posterDialog:false,
      posterUrl:'',
      playerList:['player0','player1','player2','player3'],
      videoHeight:'',
      flag:true,
      isMonitor:false,
      recommendIndex:'',
      unRecommendItem:{},
      recommendItem:{},
      typeError:false,
      cancelId:'',
      playIds:[],
      contentHeight:0,
      confirmLoading:false,
      cancelLoading:false,
      dragIndex:-1,
      recommendDialog:false,
      cancelDialog:false,
      activeVideo:-1,
      videoDetail:{},
      typeData:[],
      recommendForm:{},
      chooseTypeItem:{},
      videoData:[
        // {type:'事故',title:'标题1',url:'',hasVideo:false},
        {type:'事故',title:'标题1',url:'',hasVideo:false},
        {type:'事故',title:'标题1',url:'',hasVideo:false},
        {type:'事故',title:'标题1',url:'',hasVideo:false},
        {type:'事故',title:'标题1',url:'',hasVideo:false},
        // {type:'事故',title:'标题1',url:'',hasVideo:true},
        
        // {type:'事故',title:'标题1',url:''},
      ],
      playerOptions:{
        preload:'auto',
          // fluid: true,
          objectFit:'full',
          autoplay:false,
          aspectRatio:"16:13",
          techOrder: ['flash'], // 兼容顺序
          controls:false,
          sources: [{
            type: 'rtmp/mp4',
            src: "rtmp://bd1.scgsdsj.com:41319/live/FBD00CDE998848F19DB8DAD82C95377D000000"
          }]
      },
      recommendData:[],
      rmdTreeData:[],
      treeData:[{
          label: '一级 1',
          show:false,
          zindex:1,
          children: [{
            label: '二级 1-1',
            show:false,
            zindex:2,
            children: [{
              zindex:3,
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          show:false,
          zindex:1,
          children: [{
            label: '二级 2-1',
            show:false,
            zindex:2,
            children: [{
              zindex:3,
              label: '三级 2-1-1'
            }]
          }, {
            zindex:2,
            label: '二级 2-2',
            show:false,
            children: [{
              zindex:3,
              label: '三级 2-2-1'
            }]
          }]
        }]
    }
  },
  beforeDestroy () {
    this.playerList.map(item => {
      // item.remove()
    })
  },
  destroyed () {
    this.$off()
    this.$destroy()
  },
  watch: {
    screenNum(val) {
      if(val == 4) {
        if(this.videoData.length > 4) {
          this.videoData.splice(3,5)
        }
        this.videoHeight = (this.contentHeight - 20 ) / 2
      }else if(val == 9) {
        let arr = [{hasVideo:false},{hasVideo:false},{hasVideo:false},{hasVideo:false},{hasVideo:false}]
        let newData = this.videoData.concat(arr)
        this.videoData = newData
        this.videoHeight = (this.contentHeight - 30 ) / 3
      }
    },
    fullScreen(val) {
      let el = document.getElementById('videoWrap')
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if(typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if(typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if(wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    }
  },
  components: {
    Tree,
    videoPlayer
  },
  mounted() {
    this.contentHeight = document.documentElement.clientHeight - 82
    this.videoHeight = (this.contentHeight - 20 ) / 2
    this.getVideoTree()
    
    this.getType()
    this.$store.commit('switchScreen',4)
    let _this = this
    window.onresize = function() {
      if(screenfull.isFullscreen) {
        _this.$store.commit('setFullScreen',true)
      }else {
        _this.$store.commit('setFullScreen',false)
        _this.exitFullScreen()
        _this.videoData.map(item => {
          item.hhh = false
        })
      }
		};
  },
  computed: {
    screenNum() {
      return this.$store.state.screenNum
    },
    cameraId() {
      return this.$store.state.cameraId
    },
    clickItem() {
      return this.$store.state.clickItem
    },
    fullScreen() { 
      return this.$store.state.fullScreen
    },
  },
  methods: {
    clearFatherObj(val) {
      // console.log(val)
      this.rmdTreeData = val
    },
    mouseenter() {
      this.show = true
    },
    mouseleave() {
      this.show = false
    },
    
    videoenter(item,index) {
      if(item.hasVideo) {
        this.activeVideo = index
      }
    },
    // 全屏
    fullScreenHandle(item,index) {
      item.hhh = true
      let el = this.$refs[`videoData${index}`][0]
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if(typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if(typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if(wscript) {
          wscript.SendKeys("{F11}");
        }
      }

    },
    tttt(item,index) {
      item.hhh = true
      let el = this.$refs[`videoData${index}`][0]
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if(typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if(typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if(wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    exitFullScreen() {
      var el= document
      var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
      wscript;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
        return;
      }

      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
        wscript.SendKeys("{F11}");
        }
      }
      
    },
    fullEvent(item,index) {
      if(!item.hhh) {
        this.tttt(item,index)
        item.hhh = true
      }else {
        item.hhh = false
        this.exitFullScreen()
      }
    },
    // 获取类型
    getType() {
      getType().then(res => {
        this.typeData = res.data.body
      })
    },  
    // 获取推荐视频树
    getVideoRcmdTree(isMonitor) {
      getVideoRcmdTree({
        nodeId:'',
        level:''
      }).then(res => {
        let rmdDataTemp = res.data.body
        this.rmdTreeData = [{
          level:'',
          nodeId:'',
          nodeName:'已推荐',
          levelType:'rcmd',
          show:false,
          children:null
        }]
      })
    },
    // 获取视频树
    getVideoTree() {
      Loading.service()
      getVideoTree().then(res => {
        this.isMonitor = res.data.body.isMonitor
        if(this.flag) {
          this.treeData = res.data.body.tree
        }
        this.getVideoRcmdTree(this.isMonitor)
        // this.treeData = res.data.body.tree
        // let rmdDataTemp = res.data.body.rcmds
        
        // rmdDataTemp.map(item => {
        //   item.nodeName = item.cameraName
        //   item.children = null
        //   item.levelType = 'camera'
        //   item.status = 1
        //   item.show = null
        //   item.nodeId = item.cameraId
        // })
        // this.rmdTreeData = [{
        //   level:1,
        //   nodeName:'已推荐',
        //   type:'rmd',
        //   show:false,
        //   children:rmdDataTemp
        // }]
        this.flag = false
        
        // this.rmdTreeData = {}
        // this.rmdTreeData.level = 1
        // this.rmdTreeData.nodeName = '今日推荐'
        // this.rmdTreeData.type='rmd'
        // this.rmdTreeData.show = false
        // this.rmdTreeData.children = rmdDataTemp
        // console.log(this.rmdTreeData)
        
        // if(this.isMonitor) {
        //   treeDataTmp.splice(0,0,newObj)
        // }
        // console.log()
        // this.rmdTreeData = this.recommendData
        // console.log(this.rmdTreeData)
        // console.log(treeDataTmp)
        // this.treeData = Object.assign([],treeDataTmp)
        Loading.service().close()
        // console.log(this.treeData)
      }).catch(err => {
        Loading.service().close()
      })
    },
    // 视频详情查询
    getVideoInfo(cameraId,index) {
      getVideoInfo({
        cameraId:cameraId
      }).then(res => {
        let videoDetail = res.data.body
        videoDetail.hasVideo = true
        this.videoData[index] = videoDetail

        // this.playerList[index].remove()
        
        this.playerList[index] = cyberplayer("playercontainer"+index).setup({
          flashplayer: "./cyberplayer.flash.swf",
          width: '100%',
          height: '100%',
          file: videoDetail.url, // <—rtmp直播地址
          autostart: true,
          volume: 100,
          controls: false,
          controlbar: {
            barLogo: false,
          },
          stretching:'exactfit',
          rtmp: {
              reconnecttime: 2, // rtmp直播的重连次数
              bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
          },
          ak: "80a7c74b8f194b0a90d45b0077bc25f8" // 公有云平台注册即可获得accessKey
        });

        
        
        // console.log()


        // this.videoData[index].playerOptions = {
        //   // preload:'auto',
        //   fluid: false,
        //   objectFit:'fill',
        //   autoplay:true,
        //   // aspectRatio:"16:13",
        //   techOrder: ['flash'], // 兼容顺序
        //   // controls:false,
        //   sources: [{
        //     type: 'rtmp/mp4',
        //     src: videoDetail.url
        //   }],
        //   notSupportedMessage:'连接超时，点击重新连接',
        //   controlBar: {
        //     timeDivider: true,
        //     durationDisplay: true,
        //     remainingTimeDisplay: false,
        //     fullscreenToggle: true  //全屏按钮
        //   }
        // }
        this.$store.commit('setPlayids',this.playIds)
        this.videoData = Object.assign([],this.videoData)
      })
    },
    // 类型选择
    typeEvent(item) { 
      this.typeData.map(item1 => {
        item1.subRcmdCodes.map(item2 => {
          item2.active = false
        })
      })
      item.active = true
      this.recommendForm.rcmdCode = item.rcmdCode
      this.recommendForm.rcmdName = item.rcmdName
      this.typeData = Object.assign([],this.typeData)
      
    },
    // 推荐视频
    recommendEvent(item,index) {
      // this.posterUrl = item.imageUrl
      this.typeData.map(item1 => {
        if(item1.rcmdCode == item.rcmdCode) {
          item1.active = true
        }
      })
      this.recommendItem = item
      this.recommendDialog = true
      this.recommendForm = item
      this.recommendForm.imageUrl = ''

      this.recommendForm = JSON.parse(JSON.stringify(item));
      this.recommendIndex = index
      this.posterUrl = ''
    },
    // 提交
    submit() {
      if(this.recommendForm.rcmdCode == '' || this.recommendForm.rcmdCode == null) {
        this.$message({
          showClose: true,
          message: '请选择视频类型',
          type: 'error',
        });
      }else {
        Loading.service()
        setRecommend(this.recommendForm).then(res => {
          this.recommendItem.rcmdCode = this.recommendForm.rcmdCode
          this.recommendItem.rcmdName = this.recommendForm.rcmdName
          this.recommendItem.isRecommend = true
          // this.recommendItem.imageUrl  = this.recommendForm.imageUrl

          if(this.recommendForm.imageUrl) {
            this.recommendItem.imageUrl  = this.recommendForm.imageUrl
          }else {
            this.recommendItem.imageUrl = '/resource/rmd/camera_rcmd_default.png'
            this.posterUrl = '/resource/rmd/camera_rcmd_default.png'  + '?time=' + new Date()
          }


          this.recommendDialog = false
          this.confirmLoading = false
          // console.log(this.recommendItem)
          this.getVideoTree() 
          Loading.service().close()
        }).catch(err => {
          this.confirmLoading = false
          Loading.service().close()
        })
      }
    },
    // 取消推荐
    unRecommendEvent(item) {
      this.cancelId = item.cameraId
      this.cancelDialog = true
      this.unRecommendItem = item
      
    },
    // 确认取消
    confirmCancel() {
      this.cancelLoading = true
      Loading.service()
      unRecommend({cameraId:this.cancelId}).then(res => {
        this.cancelLoading = false
        this.cancelDialog = false
        this.unRecommendItem.isRecommend = false
        this.unRecommendItem.rcmdCode = ''
        this.unRecommendItem.rcmdName = ''
        this.posterUrl = ''
        this.typeData.map(item => {
          item.active = false
        })
        Loading.service().close()
        this.getVideoTree()
      }).catch(err => {
        this.cancelLoading = false  
        Loading.service().close()
      })
    },
    close() {
      this.typeError = false
      this.typeData.map(item1 => {
        item1.subRcmdCodes.map(item2 => {
          item2.active = false
        })
      })
    },
    // 拖拽放开事件
    drop(e) {
      console.log('jkkkkjjj')
      let index = e.currentTarget.getAttribute('data-idx')
      this.getVideoInfo(this.cameraId,index)
      this.clickItem.show = true
      this.$store.commit('setItem',this.clickItem)

    },
    // 拖拽移动事件
    allowDrop(e) {
      e.preventDefault()
      this.dragIndex = e.currentTarget.getAttribute('data-idx')
    },
    // 做拽进入事件
    dargEnter(e,item) {
      // e.preventDefault()
      if(!item.hasVideo) {
      }
    },
    // 拖拽离开事件
    dargLeave(e,item) {
      // e.preventDefault()
      if(!item.hasVideo) {
        this.dragIndex = -1
        // console.log('leave')
      }
    },
    // 图片上传
    beforeUpload(file) {
      const isLt2M = file.size / 1024 > 1024;
      this.uploadParams.fileName = this.recommendForm.cameraId
      if (isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!');
        return false
      }
    },
    uploadSuccess (res, file) {
      // console.log(res)
      this.recommendForm.imageUrl = ''
      this.recommendForm.imageUrl = res.body.filePath
      this.recommendForm = Object.assign({},this.recommendForm)
      this.$refs.upload.clearFiles()
      this.posterUrl =  res.body.filePath  + '?time=' + new Date()
      console.log(this.posterUrl)
      Loading.service().close()
      console.log('success')
    },
    uploadError (response, file, fileList) {
      this.$message.error('上传失败，请重试!');
      Loading.service().close()
    },
    uploadEvent(event) {
      let _this = this
      
      let file = event.target.files[0]
      console.log(file)
      var reader = new FileReader()
      reader.readAsDataURL(file); //将图片url转换为base64码
      reader.onload = function(e){
        var newUrl = this.result;

        _this.recommendForm.imageUrl = ''
        _this.recommendForm.imageUrl = newUrl
        _this.recommendForm.imageBase64 = newUrl
        _this.recommendForm = Object.assign({},_this.recommendForm)
        
        console.log(newUrl)
        _this.posterUrl = newUrl
        
        
      }
      console.log('change')
    },
    // 查看封面图
    showPoster(posterUrl,imageUrl,item) {
      console.log(item)
      // console.log(posterUrl)
      this.posterDialog = true

      function isBase64(str) {
          if (str ==='' || str.trim() ===''){ return false; }
          try {
              return btoa(atob(str)) == str;
          } catch (err) {
              return false;
          }
      }
      console.log(imageUrl.indexOf('data:image')>-1)

      // this.posterUrl =  posterUrl ? posterUrl + '?time=' + new Date() : imageUrl
      if(imageUrl.indexOf('data:image')>-1) {
        this.posterUrl = imageUrl
      }else {
        this.posterUrl =   imageUrl
        
      }
      console.log(this.baseUrl)
    },
    closePoster() {
      // this.posterUrl = ''
    }
  }
};
</script>

<style  lang="less" >
.jw-title {
  z-index:100000000 !important;
}
.video-js {
  display:block;
}
// * {
//   object-fit: fill !important;
// }
.vjs-custom-skin > .video-js {
  // object-fit: fill !important;
}
.video-player {
  // border:1px solid red;
  >div {
    // height:280px !important;
    // border:1px solid red;
  }
}
object {
  object-fit: fill !important;
}
.vjs_video_3-dimensions.vjs-fluid {
  paddint-top:0;
}
.video-container {
  .el-dialog__wrapper {
    top:-110px;
    // z-index:2002 !important;
  }
  .avatar-uploader {
    width:192px;
    height:108px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    input {
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      right:0;
      opacity: 0;
      cursor: pointer;
    }
    img {
      display:block;
      width:192px;
      height:108px;
    }
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 30px;
      color: #8c939d;
      width: 192px;
      height: 108px;
      line-height: 108px;
      text-align: center;
    }
    .avatar {
      width: 192px;
      height: 108px;
      display: block;
    }
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  position:absolute;
  left:0;
  top:80px;
  bottom:0;
  width:100%;
  display:flex;
  box-sizing: border-box;
  .move-enter-active, 
  .move-leave-active {
      transition: all .3s;
  }

  .move-enter,
  .move-leave-to{
      transform: translate3d(0px, 72px, 0);
  }
  padding:20px;
  display:flex;
  .company-wrap {
    overflow-y:auto;
    width:400px;
    flex-shrink:0;
    background:#F0F3F5;
    border-radius: 4px;
    padding:27px 0;
    padding-right:20px;
    box-sizing: border-box;
  }
  .video-wrap {
    // width:70%;
    // margin-left:20px;
    // border:1px solid red;
    // box-sizing: border-box;
    // display: flex;
    // flex-wrap: wrap;
    display:flex;
    position: relative;
    align-items: flex-start;
    // overflow: scroll;
    flex:1; 
    .video-content {
      // border:1px solid red;
      margin-left:20px;
      padding-left:10px;
      display:flex;
      flex-shrink:0;
      flex-wrap: wrap;
      // width:100%;
      flex:1;
      &.f-screen {
        border:10px solid #000;
        padding-left:0;
        box-sizing: border-box;
        margin-left:0;
      }
      .video-item {
        box-sizing: border-box;
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        padding:5px;
        display: flex;
        flex-shrink: 0;
        margin-right:-1px;
        margin-top:-1px;
        &.f-screen {
          border:10px solid #000;
          padding:0;
          border-radius: 0;
          .video {
            border-radius: 0;
          }
        }
        .type {
          padding:0 5px;
          font-size:15px;
          margin-right:12px;
          height:28px;
          text-align: center;
          line-height:28px;
          background:rgba(255,255,255,.2);
          border-radius:4px;
          &.type-no {
            background:rgba(0,0,0,.6);
            z-index:100;
            color:#fff;
            position: absolute;
            left:20px;
            bottom:22px;
          }
        }
        .video-no {
          width:100%;
          background:#D5D9E0;
          // padding-top:82.17%;
          position: relative;
          &.drag-video {
            background:#C2C7D2;
          }
          .empty {
            padding:12px;
            box-sizing: border-box;
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            .content {
              font-size:16px;
              color:#fff;
              border:2px dashed #fff;
              border-radius: 2px;
              height:200px;
              display:flex;
              align-items: center;
              justify-content: center;
              // padding-top:50%;
              .drag-after {
                display:flex;
                flex-direction: column;
                align-items: center;  
                img {
                  margin-bottom:20px;
                }
              }
            }
          }
        }
        .video {
          position: relative;
          border-radius: 4px;
          overflow: hidden;
          cursor: pointer;
          width:100%;
          display:flex;
          .wo {
            position:absolute;
            left:0;
            top:0;
            z-index:10;
            width:100%;
            height:100%;
          }
          .empty {
            pointer-events: none;
          } 
          .bottom {
            z-index:11;
            position: absolute;
            width:100%;
            left:0;
            bottom:0;
            height:72px;
            background: -webkit-linear-gradient(transparent, #000); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(transparent, #000); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(transparent, #000); /* Firefox 3.6 - 15 */
            background: linear-gradient(transparent, #000); /* 标准的语法 */
            // background:red;
            display:flex;
            justify-content: space-between;
            align-items: center;

            color:#fff;
            padding:0 20px;
            box-sizing: border-box;
            .title {
              font-size: 16px;
              overflow: hidden;/*超出部分隐藏*/
              text-overflow:ellipsis;/* 超出部分显示省略号 */
              white-space: nowrap;/*规定段落中的文本不进行换行 */
              flex:1;
              text-align: center;
            }
            .handle-wrap {
              display:flex;
              align-items: center;
              .collection {
                img {
                  margin-top:2px;
                }
              }
              img {
                cursor: pointer;
              }
              .recommend {
                margin-right:10px;
                font-size:11px;
                border:2px solid rgba(255,255,255,.7);
                border-radius: 3px;
                width:35px;
                height:18px;
                text-align: center;
                line-height:18px;
                font-weight: bold;
                &.recommend-no {
                  background:rgba(255,255,255,.7);
                  border:0;
                  color:#10100B;
                  width:35px;
                }
              }
            }
          }
        }
        
      }
      
      &.screen4 {
        .video-item {
          width:50%;
          height:50%;
          // max-width:500px;
        }
      }
      &.screen9 {
        .video-item {
          width:33.33%;
          height:33.33%;
          // max-width:338px;
        }
      }
      // &.f-screen.screen4 {
      //   margin: 0 auto;
      //   width:100%;
      //   max-width: 100%;
      //   .video-item {
      //     max-width:50%;
      //   }
      // }
      // &.f-screen.screen9 {
      //   overflow: scroll;
      //   margin: 0 auto;
      //   width:100%;
      //   max-width: 100%;
      //   .video-item {
      //     max-width:33.33%;
      //   }
      // }
    }
    .empty-content {
      display:flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      // border:1px solid red;
      width:100%;
      margin:auto;
      .tips {
        font-size:24px;
        color:#C2C7D2;
        margin-top:15px;
      }
    }
  }
  .recommend-dialog {
    .el-dialog {
      width:650px;
      border-radius: 6px;
    }
    .el-dialog__title {
      font-size:20px;
    }
    .el-dialog__close {
      font-size:28px;
    }
    .content {
      .item {
        margin-bottom:20px;
        position: relative;
        .label {
          font-size:16px;
          color:#808080;
          margin-bottom:20px;
          &.require-label:after {
            content: "*";
            color: #f56c6c;
            margin-left: 4px;
          }
        }
        .tips {
          font-size:14px;
          padding-top:10px;
          color:#999;
        }
        .dis-input {
          font-size: 16px;
          width: 100%;
          height: 40px;
          line-height:40px;
          border-radius: 4px;
          border: 1px solid #E6E6E6;
          padding: 0 13px;
          background-color:#f8f8f8;
          box-sizing: border-box;

        }
        .type-wrap {
          margin-bottom:29px;
          position: relative;
          .t-title {
            font-size:14px;
            &.t-title1 {
              color:#5B7EEA;
            }
            &.t-title2 {
              color:#F8616F;
            }
            &.t-title3 {
              color:#FC7D1C;
            }
          }
          .type-list {
            display:flex;
            flex-wrap: wrap;
            margin-left:-10px;
            .type-item {
              width:135px;
              height:34px;
              text-align: center;
              // line-height:34px;
              display:flex;
              justify-content: center;
              align-items: center;
              border:1px solid #E6E6E6;
              box-sizing: border-box;
              border-radius: 4px;
              color:#4D4D4D;
              cursor: pointer;
              font-size:16px;
              margin:10px;
              &.active {
                color:#fff;
                background:#3BABF2;
                border:1px solid #3BABF2;
              }
            }
          }
          
        }
        .error-tips {
          position:absolute;
          margin-top:-15px;
          left:0px;
          bottom:-25px;
          color: red;
          font-size:13px;
          margin-top:10px;
          width:100%;
        }
        .title-input {
          font-size:16px;
          width:100%;
          height:40px;
          border-radius: 4px;
          border:1px solid #E6E6E6;
          padding:0 13px;
          box-sizing: border-box;
          outline: none;
        }
        input::-webkit-input-placeholder { /* WebKit browsers */
          color:#B3B3B3;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color:#B3B3B3;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
          color:#B3B3B3;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
          color:#B3B3B3;
        }
        

      }
    }
    .confirm-btn {
      width:240px;
      height:48px;
      line-height:48px;
      padding:0;
      border-radius: 24px;
      font-size:16px;
      color:#fff;
      text-align: center;
      line-height:48px;
      background:#3BABF2;
      margin:0 auto;
      display:block;
      margin-top:40px;
      outline: none;
      cursor: pointer;
      border:none;  
    }
  }
  .cancel-dialog {
    .el-dialog {
      width:360px;
      text-align: center;
      border-radius: 6px; 
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-75px !important;
      margin-left:-180px;
    }
    .el-dialog__title {
      font-size:20px;
    }
    .btn {
      width:120px;
      height:36px;
      text-align: center;
      line-height:36px;
      border-radius: 18px;
      font-size:16px;
      color:#fff;
      background:#3BABF2;
      outline: none;
      margin:0 5px;
      border:none;
      cursor: pointer;
      &.no-btn {
        background:#C2C7D2;
      }
    }
  }
  
}
</style>
